<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        window.onload = function () {

            /**
             * 事件的绑定-实践案例：点击按钮以后弹出一个内容
             */

            //获取按钮对象
            var btn01 = document.getElementById("btn01");

            /**
             * 事件绑定方案1：使用 对象.事件 = 函数 的形式绑定响应函数，
             *    它只能同时为一个元素的一个事件绑定一个响应函数，
             *    不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
             */
            ////为btn01绑定一个单击响应函数
            //btn01.onclick = function(){
            //	alert(1);
            //};
            ////为btn01绑定第二个响应函数
            //btn01.onclick = function(){
            //	alert(2);
            //};

            /**
             * 事件绑定方案2：使用 对象.attachEvent("on事件",回调函数,false) 的形式绑定响应函数。
             * 知识点：addEventListener()
             *    - 通过这个方法也可以为元素绑定响应函数
             *  - 参数：
             *        1.事件的字符串，不要on
             *        2.回调函数，当事件触发时该函数会被调用
             *        3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
             *
             * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
             *    这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
             *
             * 这个方法不支持IE8及以下的浏览器
             */

            //btn01.addEventListener("click",function(){
            //	alert(1);
            //},false);
            //
            //btn01.addEventListener("click",function(){
            //	alert(2);
            //},false);
            //
            //btn01.addEventListener("click",function(){
            //	alert(3);
            //},false);

            /**
             * 事件绑定方案3：使用 对象.attachEvent("on事件",函数) 的形式绑定响应函数。
             * 知识点：attachEvent()
             *    - 在IE8中可以使用attachEvent()来绑定事件
             *  - 参数：
             *        1.事件的字符串，要on
             *        2.回调函数
             *
             *  - 这个方法也可以同时为一个事件绑定多个处理函数，
             *    不同的是它是后绑定先执行，执行顺序和addEventListener()相反
             */
            /*btn01.attachEvent("onclick",function(){
                alert(1);
            });

            btn01.attachEvent("onclick",function(){
                alert(2);
            });

            btn01.attachEvent("onclick",function(){
                alert(3);
            });*/

            /*btn01.addEventListener("click",function(){
                alert(this);
            },false);*/

            /*btn01.attachEvent("onclick",function(){
                alert(this);
            });*/

            bind(btn01, "click", function () {
                alert(this);
            });
        };

        /**
         * addEventListener()中的this，是绑定事件的对象
         * attachEvent()中的this，是window
		 *
         * 公共函数：定义一个函数，用来为指定元素绑定响应函数，需要统一两个方法this
         * 参数：
         *  obj 要绑定事件的对象
         *  eventStr 事件的字符串(不要on)
         *  callback 回调函数
		 *
		 * 统一两个方法this的问题：
		 * 	- call 方法允许你在一个对象上调用一个函数，并将该对象作为函数内部的 this 值。它的语法如下：function.call(thisArg, arg1, arg2, ...)
		 * 	- apply 方法与 call 类似，但它接受一个数组作为参数，而不是逐个列出参数。它的语法如下：function.apply(thisArg, [argsArray])
         */
        function bind(obj, eventStr, callback) {
            //判断obj中是否有addEventListener()方法
			if (obj.addEventListener) {
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr, callback, false);
            } else {
                //this是谁由调用方式决定， callback.call(obj)，IE8及以下
                obj.attachEvent("on" + eventStr, function () {
                    //把调用callback回调函数的权力拿回,在匿名函数中调用回调函数，指定this=obj
                    callback.call(obj);
                });
            }
        }

    </script>
</head>
<body>

<button id="btn01">点我一下</button>
</body>
</html>
